<ion-view view-title="GOODS DETAIL">
    <ion-nav-buttons side="left">
        <a class="button icon-left ion-chevron-left button-clear button-dark" ng-click="goBack()">
            Back
        </a>
    </ion-nav-buttons>
    <ion-content>
        <ion-list class="list">
            <ion-item class="item">
                <h2 class="custom-center">
                    Item Detail
                </h2>
                <div>
                    <span class="custom-word">{{item.name}}</span>
                </div>
                <div class="row">
                    <div class="col col-50">
                        <img ng-src="{{item.image}}" style="width: 100%">
                    </div>
                    <div class="col col-50">
                        <div>${{item.price | number:2}} ×{{item.qty_ordered | number:0}}</div>
                        <div><del>${{item.store_price}}</del></div>
                        <div>LOC:{{item.location}}</div>
                        <div>UPC:{{item.sku}}</div>
                        <div>
                            <span class="custom-word">Note:{{item.customer_message}}</span>
                        </div>
                    </div>
                </div>
            </ion-item>

            <ion-item class="item">
                <h2 class="custom-center">
                    Operation
                </h2>
                <div class="row">
                    <div class="col col-50">
                        Pick Up
                        <label class="toggle toggle-balanced">
                            <input type="checkbox" ng-model="pick_up" ng-change="pickUp(pick_up)" ng-disabled="out_of_stock">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </div>
                    <div class="col col-50">
                        Out of stock
                        <label class="toggle toggle-assertive">
                            <input type="checkbox" ng-model="out_of_stock" ng-change="outOfStock(out_of_stock)" ng-disabled="pick_up">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                        </label>
                    </div>

                </div>
            </ion-item>

            <ion-item class="item" ng-show="showSub">
                <h2 class="custom-center">
                    Substitute
                </h2>
                <div class="list list-inset" ng-disabled="out_of_stock">
                    Markup
                    <label class="toggle toggle-balanced">
                        <input type="checkbox" ng-model="markup" ng-change="changeMarkUp(markup)">
                        <div class="track">
                            <div class="handle"></div>
                        </div>
                    </label>
                    <label class="item item-input">
                        <input ng-model="item.sub_name" type="text" name="sub_name" placeholder="Sub Item Name">
                    </label>
                    <label class="item item-input">
                        <input ng-model="item.sub_price" type="text" name="sub_price" placeholder="Price">
                    </label>
                    <label class="item item-input">
                        <input ng-model="item.sub_volume" type="text" name="sub_volume" placeholder="Volume">
                    </label>
                    <span style="margin: 10,10,10,10">New Price: $ {{item.sub_price * item.sub_volume / markup_precent | number:2}}</span>

                    <button class="button button-balanced button-full" type="submit" ng-click="submitSub(item)" ng-disabled="out_of_stock">Confirm Substitute</button>

                </div>

            </ion-item>

        </ion-list>
    </ion-content>
</ion-view>